import React, {memo} from 'react';
import { useSelector, shallowEqual } from "react-redux";

import {
    HeaderWrapper
} from "./style"
// 发现音乐 / 排行榜---》右边歌曲列表这个头部

export default memo(function CJXThemeHeaderSong() {
    // redux
    const { playListDetail } = useSelector(state => ({
        playListDetail: state.getIn(["ranking", "playListDetail"])
    }), shallowEqual)

    return (
        <HeaderWrapper>
            <div className="left">
                <h3 className="title">歌曲列表</h3>
                <div className="count">{playListDetail.trackCount}首歌</div>
            </div>
            <div className="right">
                <span>播放：</span>
                <span className="count">{playListDetail.playCount}</span>
                <span>次</span>
            </div>
        </HeaderWrapper>
    )
})
